<template>
  <div>
    <!-- 顶部title -->
    <van-nav-bar fixed placeholder>
      <img :src="imgSrc" alt="" slot="left" class="img_toutiao_logo">
          <template #right>
            <van-icon name="search" size="18" color="#fff" @click="$router.push('/search')"/>
          </template>
     </van-nav-bar>
        <!-- 弹出层组件 -->
    <van-popup v-model="show" class="edit_wrap" @closed="closedFn">
      <!-- 弹出层的主体区域 -->
      <channel-edit
        ref="channelEdit"
        :userChannelList="channelList"
        @close="show = false"
        @addChannel="addChannelFn"
        @RemoveChannel="removeFn"
        @channelJump="channelJumpFn"
        ></channel-edit>
    </van-popup>
     <!-- 编辑频道图标 -->
<van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show = true"/>
     <!-- 导航栏   color=#007bff-->
     <van-tabs
      v-model="channelId"
        animated
        sticky
        offset-top="1.26667rem"
        :before-change="beforeChangeFn"
        @change="changeFn"
        >
        <van-tab id="navBar" v-for="item in channelList" :key="item.id" :title="item.name" :name="item.id">
         <article-list :cid="channelId"></article-list>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import ChannelEdit from './components/ChannelEdit.vue'
// 将图片模块化导入。定义变量接受，然后使用
import { getUserChannelApi, updateChannelListApi } from '@/api'
import imgLogo from '@/assets/toutiao_logo.png'
import ArticleList from './ArticleList.vue'
const nameToTop = {} // 定义一个数组，接受每个频道滚动条滚动的距离，当返回这个频道时，获取这个距离，并且赋值scrollTo
export default {
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      imgSrc: imgLogo,
      channelId: 0, // 默认选中的频道 id
      channelList: [],
      show: false
    }
  },
  beforeRouteLeave (to, from, next) {
    // 当离开页面时，记录下，页面滚动的距离，放置到当前路由的元数据中
    // 在路由全局守卫的后置守卫中，当返回该页面，将返回到滚动的位置
    from.meta.isScroll = true
    from.meta.top = window.scrollY
    // console.log(from.meta)
    next()
  },
  async created () {
    const res = await getUserChannelApi()
    // console.log(res)
    this.channelList = res.data.data.channels
  },
  methods: {
    changeFn (id) {
      // 进入页面时触发的函数,会接受当前页面的name（id）和title属性作为参数
      // 获取存入的页面顶部距离，并且在页面更新后跳转
      this.$nextTick(() => {
        window.scrollTo(0, nameToTop[id] || 0)
      })
    },
    beforeChangeFn () {
    // 当页面即将跳转时，会触发该函数
    // 将当前页面的id 和当前页面的滚动距离，放入到变量中
      nameToTop[this.channelId] = window.scrollY
      return true // 该函数要返回一个布尔值，false代表阻止跳转
    },
    addChannelFn (val) {
      this.channelList.push(val)
      // 调用接口，更新数据，配置需要的参数
      this.upChannelFn()
    },
    async upChannelFn () {
      const list = this.channelList.filter(item => item.id !== 0)
      const arrList = list.map((item, index) => {
        const newObj = { ...item } // 浅拷贝对象，防止数据污染
        newObj.seq = index + 1
        delete newObj.name
        return newObj
      })
      await updateChannelListApi({ channels: arrList })
    },
    removeFn (val) {
      // console.log(val)
      const index = this.channelList.findIndex(item => item.id === val.id)
      this.channelList.splice(index, 1)
      this.upChannelFn()
    },
    closedFn () {
      // console.log(this.$refs.channelEdit)
      this.$refs.channelEdit.isEdit = true
    },
    channelJumpFn (val) {
      // 点击对应频道，将跳转到相应频道列表，并且关闭弹出层
      // 不用重新调用接口，因为当频道跳转时，自动会调用接口渲染页面
      this.channelId = val.id
    }

  }
}
</script>

<style lang="less" scoped>
.img_toutiao_logo {
  width: 100px;
  height: 30px;
}
#navBar {
  text-align: center;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
/* 频道编辑弹出层铺满屏幕 */
.edit_wrap{
  width: 100%;
  height: 100%;
}
</style>
